<template>
  <div style="line-height: 26px;">
    <span class="marklabel">旷工</span>
    <span class="marklabel">迟到</span>
    <span class="marklabel">早退</span>
    <span class="marklabel">缺卡</span>
    <span class="marklabel">外勤打卡</span>
    <span class="marklabel">加班</span>
    <span class="marklabel">请假</span>
    <span class="marklabel">外出</span>
    <span class="marklabel">出差</span>
  </div>
</template>

<script>
export default {
  name: "ColorBar",
  props: {
    desc: {
      type: String,
      default: ""
    }
  }
};
</script>
<style lang="scss">
.marklabel:nth-of-type(1)::before {
  background: #c00;
}
.marklabel:nth-of-type(2)::before {
  background: #ff239d;
}
.marklabel:nth-of-type(3)::before {
  background: #ff5858;
}
.marklabel:nth-of-type(4)::before {
  background: #f90;
}
.marklabel:nth-of-type(5)::before {
  background: #23ac39;
}
.marklabel:nth-of-type(6)::before {
  background: #7664ff;
}
.marklabel:nth-of-type(7)::before {
  background: #2d8cf0;
}
.marklabel:nth-of-type(8)::before {
  background: #59d8e2;
}
.marklabel:nth-of-type(9)::before {
  background: #7f6b5a;
}

.marklabel::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 2px;
}
.marklabel {
  margin-right: 12px;
}
</style>